<template>
	<view class="container">
		<view class="card-view">
			<image class="card-bg" mode="" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/2fc82367-0636-43b0-8e8d-0f2caf8f0346.png"></image>
			<view class="head-view">
				<view style="display: flex;align-items: center;">
					<image class="avatar-icon" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/e6c9d0ae-9419-441f-9a31-f7d6488028e4.png"></image>
					<view class="user">
						<view class="info">
							<view class="name">{{userdata.nickName || ''}}</view>
							<image class="member-icon" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/0b3ebb8b-ea90-49a5-9028-0e1eed88ac76.png" v-if="userdata.boughtVip === 1"></image>
						</view>
						<view class="tip" v-if="userdata.boughtVip === 1">{{userdata.vipInfo.endDate}}到期</view>
						<view class="tip" v-else>您还不是会员，开通立享会员特权</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content-view">
			<image class="content-bg" mode="scallToFill" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/f752ff9f-1ddc-4af1-b78d-7e5fc2fd6df5.png"></image>
			<view class="box">
				<view class="package-view">
					<view class="package-list">
						<view class="package-item" :class="{'active':index == num}" v-for="(item,index) in datalist" :key="index" @click="handleMember(item,index)">
							<view class="duration">{{item.vipName}}</view>
							<view class="new-price">¥{{item.price}}</view>
							<view class="old-price">¥{{item.price}}</view>
							<view class="compute" :class="{'computeActive':index == num}">折合0.16元/天</view>
						</view>
					</view>
				</view>
				<!-- 会员权益 -->
				<view class="nav-view">
					<view class="nav-title">会员权益</view>
					<view class="nav-list">
						<view class="nav-item">
							<image class="nav-image" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/9a57ac45-b770-427f-bb17-195439742637.png"></image>
							<text>经络全图</text>
						</view>
						<view class="nav-item">
							<image class="nav-image" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/cd89c784-c466-4df2-91cd-2da468a4c8d7.png"></image>
							<text>完整体质</text>
						</view>
						<view class="nav-item">
							<image class="nav-image" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/accfe0e3-b5f0-4520-ac73-41a50f0bc9fd.png"></image>
							<text>舌诊检测</text>
						</view>
						<view class="nav-item">
							<image class="nav-image" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/432a5405-1bce-429f-b62e-c8d7066d9825.png"></image>
							<text>中医调理</text>
						</view>
					</view>
				</view>
				<!-- 支付方式 -->
				<view class="pay-view">
					<view class="title">支付方式</view>
					<image src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/de575379-7ca1-4820-b580-97fcb1a4ec3a.png" class="wx-bg" mode="widthFix"></image>
				</view>
				<!-- 尊享特权 -->
				<view class="paging">
					<view class="title">尊享特权</view>
					<view class="paging-list">
						<view class="paging-item">
							<image class="paging-bg" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/a33ea01b-442d-4b81-ba2f-c37a9d0e23d4.png"></image>
							<view class="paging-l">
								<text class="label">Ai舌诊</text>
								<text class="value">一键扫描诊断，舌像特征</text>
							</view>
							<view class="paging-r">
								<image class="r-bg" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/20374a46-8525-4982-ac86-eca986760ba8.png"></image>
							</view>
						</view>
						<view class="paging-item">
							<image class="paging-bg" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/a33ea01b-442d-4b81-ba2f-c37a9d0e23d4.png"></image>
							<view class="paging-l">
								<text class="label">国医大师课程</text>
								<text class="value">精选课程视频  不限制观看</text>
							</view>
							<view class="paging-r">
								<image class="r-bg" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/06fd6c25-9162-4729-afd2-8dfb72eb3053.png"></image>
							</view>
						</view>
						<view class="paging-item">
							<image class="paging-bg" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/a33ea01b-442d-4b81-ba2f-c37a9d0e23d4.png"></image>
							<view class="paging-l">
								<text class="label">经络穴位解读</text>
								<text class="value">十二正经可随时查看</text>
							</view>
							<view class="paging-r">
								<image class="r-bg" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/22c3366d-0a26-4e7b-b160-3c17969e0e09.png"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="agree">
					<radio @click="change" :checked="is_true" color ="#FF702A"/>
					已阅读并同意<a href="">❬❬会员协议❭❭</a>
				</view>
				<view class="footer">
					<view @click="onOpen">
						<view>
							<image class="btn-bg" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/c102ecf3-b456-4597-9041-67b11c96cc06.png"></image>
						</view>
						<view class="open-text">
							<text style="padding-right: 6rpx;" v-if="num != null">￥{{price}}</text> &nbsp;立即开通
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	//引入请求文件
	import {listing,publicing} from '../../api/api.js'
	import {vipList,pay,userInfo} from '../../api/request.js'
	export default {
		data(){
			return{
				is_true: false,
				userdata:{},
				datalist:[],
				num:null,
				price:'',
				vipId:''
			}
		},
		onShow() {
			this.ifUser()
			this.getInfo()
		},
		created() {
			this.getdata()
		},
		methods:{
			//获取用户信息
			getInfo(){
				listing(userInfo)
				.then(res=>{
					if(res.data.code === 200){
						this.$store.commit('getUserInfo',res.data?.data)
						this.userdata = res.data?.data
					}
				})
			},
			ifUser(){
				let user = uni.getStorageSync('user')
				if(!user) return
				this.userdata=JSON.parse(user)
			},
			getdata(){
				listing(vipList).then(res=>{
					if(res.data.code == 200){
						this.datalist = res.data?.data
					}
				})
			},
			handleMember({price,id},index){
				this.price = price
				this.vipId = id
				this.num = index
			},
			change(){
				this.is_true = !this.is_true
			},
			// 开通
			onOpen(){
				if(this.num == null) return uni.showToast({"title": "请选择会员","icon": "none"})
				if (this.is_true == false) return uni.showToast({"title": "请同意会员协议","icon": "none"})
				this.getCode()
			},
			getCode(){
				uni.showLoading({title:'支付中'})
				uni.login({
					success:(res)=>{
						this.getWx(res.code)
					},
					fail:(err)=>{
						console.log(err)
						uni.hideLoading();
					}
				})
			},
			getWx(code){
				publicing(pay,{
					vipId: this.vipId,
					code
				}).then(res=>{
					console.log(res)
					if(res.data.code == 200){
						this.onPay(res.data.data)
					}else{
						uni.hideLoading();
					}
					this.num = null
				})
				.catch(err=>{
					uni.hideLoading();
				})
			},
			onPay(obj){
				uni.hideLoading();
				uni.requestPayment({
					...obj,
					success:(res)=>{
						this.$refs.uToast.show({
							type: 'success',
							message: '支付成功'
						})
						this.getInfo()
					},
					fail:(err)=>{
						this.$refs.uToast.show({
							type: 'error',
							message: '支付失败'
						})
						this.getInfo()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		position: relative;
		width: 100%;
		height: 100vh;
		background: #000;
		.card-view{
			position: absolute;
			top: 80rpx;
			left: 32rpx;
			right: 32rpx;
			.card-bg{
				width: 100%;
				height: 260rpx;
			}
			.head-view{
				position: absolute;
				top: 32rpx;
				left: 32rpx;
				right: 0;
				bottom: 0;
				.avatar-icon{
					width: 120rpx;
					height: 120rpx;
				}
				.user{
					margin-left: 20rpx;
					font-weight: bold;
					color: #140F08;
					.info{
						display: flex;
						.name{
							font-size: 32rpx;
							margin-bottom: 12rpx;
						}
						.member-icon{
							width: 48rpx;
							height: 48rpx;
							margin-left: 10rpx;
						}
					}
					.tip{
						font-size: 24rpx;
					}
				}
			}
		}
		.content-view{
			position: absolute;
			left: 0;
			right: 0;
			top: 260rpx;
			height: 100%;
			box-sizing: border-box;
			.content-bg{
				width: 100%;
				height: 100%;
			}
			.box{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				padding: 0 32rpx;
				box-sizing: border-box;
				.package-view{
					width: 100%;
					margin-top: 60rpx;
					.package-list{
						display: flex;
						// justify-content: space-between;
						align-items: center;
						.package-item{
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-between;
							width: 212rpx;
							height: 240rpx;
							background-image: url('https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/9/efa00e59-5ab9-4978-9625-20d81cd1efb8.png');
							background-repeat: no-repeat;
							background-size: cover;
							background-position: center;
							margin-right: 24rpx;
							padding: 18rpx 0;
							box-sizing: border-box;
							&:last-child{
								margin-right: 0;
							}
							.duration{
								font-size: 28rpx;
								color: #32363C;
							}
							.new-price{
								font-size: 56rpx;
								color: #32363C;
								font-weight: 700;
								margin: 3rpx 0;
							}
							.old-price{
								font-size: 24rpx;
								color: #5B5E63;
								text-decoration: line-through;
							}
							.compute{
								font-size: 20rpx;
								color: #999B9E;
								background: #E0E1E2;
								padding: 6rpx 20rpx;
								border-radius: 6rpx;
								margin-top: 14rpx;
								box-sizing: border-box;
							}
							.computeActive{
								color: #FF8D55;
								background: #FFDDC3;
							}
						}
						.active{
							background-image: url('https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/9/0e80aaa1-4266-46da-aca3-fe8b782ae241.png');
						}
					}
				}
				.nav-view{
					margin-top: 60rpx;
					.nav-title{
						color: #140F08;
						font-weight: bold;
						margin-bottom: 32rpx;
						padding-left: 30rpx;
					}
					.nav-list{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: 0 50rpx;
						.nav-item{
							display: flex;
							flex-direction: column;
							align-items: center;
							.nav-image{
								width: 88rpx;
								height: 88rpx;
							}
							text{
								color: #140F08B3;
								font-size: 24rpx;
								font-weight: 400;
							}
						}
					}
				}
				.pay-view{
					margin-top: 60rpx;
					.title{
						color: #140F08;
						font-weight: bold;
						margin-bottom: 32rpx;
						padding-left: 30rpx;
					}
					.wx-bg{
						width: 328rpx;
					}
				}
				.paging{
					margin-top: 60rpx;
					.title{
						color: #140F08;
						font-weight: bold;
						margin-bottom: 32rpx;
						padding-left: 30rpx;
					}
					&-list{
						.paging-item{
							position: relative;
							width: 100%;
							height: 200rpx;
							margin-bottom: 24rpx;
							&:last-child{
								margin-bottom: 0;
							}
							.paging-bg{
								width: 100%;
								height: 200rpx;
							}
							.paging-l{
								position: absolute;
								top: 50%;
								transform: translateY(-50%);
								left: 32rpx;
								display: flex;
								flex-direction: column;
								.label{
									font-weight: 500;
									font-weight: 500;
									color: #140F08;
									margin-bottom: 16rpx;
								}
								.value{
									font-weight: 400;
									font-size: 24rpx;
									color: #140F08B3;
								}
							}
							.paging-r{
								position: absolute;
								top: 50%;
								transform: translateY(-50%);
								right: 20rpx;
								.r-bg{
									width: 208rpx;
									height: 148rpx;
								}
							}
						}
					}
				}
				.agree{
					width: 100%;
					display: flex;
					color: #140F08B3;
					margin: 52rpx 0 30rpx;
					font-size: 28rpx;
					align-items: center;
					radio{
						transform: scale(.7);
					}
					a{
						color: #FF770F;
						padding: 0 6rpx;
					}
				}
				.footer{
					position: relative;
					margin-bottom: 60rpx;
					.btn-bg{
						width: 100%;
						height: 96rpx;
					}
					.open-text{
						position: absolute;
						top: 0;
						left: 50%;
						transform: translateX(-50%);
						line-height: 96rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: #fff;
					}
				}
				
			}
		}
	}
</style>